<template>
  <div>
    <!-- 引入导航栏组件 -->
    <NavBar />
    <!-- 为您的爱宠提供专业训练服务部分 -->
    <div class="hero-section">
      <div class="hero-text">
        <h1>专业宠物训练，塑造乖巧萌宠</h1>
        <p>资深训犬师团队，定制化训练方案，助力宠物养成良好习惯</p>
        <button class="btn" @click="goToReservation">立即预约</button>
      </div>
    </div>
    <!-- 热门服务项目部分 -->
    <div class="popular-services-section">
      <h2>热门服务项目</h2>
      <div class="service-item" v-for="(service, index) in services" :key="index">
        <div class="service-content">
          <img :src="service.image" :alt="service.title">
          <div class="service-details">
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
            <span class="price">{{ service.price }}</span>
            <button class="btn" @click="goToReservation">立即预约</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们的特色服务部分 -->
    <div class="features-section">
      <h2>我们的特色服务</h2>
      <div class="feature-item" v-for="(feature, index) in features" :key="index">
        <img :src="feature.image" :alt="feature.title">
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
      </div>
    </div>
    
    <!-- 顾客评价部分 -->
    <div class="reviews-section">
      <h2>顾客评价</h2>
      <div class="review-item" v-for="(review, index) in reviews" :key="index">
        <img :src="review.avatar" :alt="review.name" class="customer-avatar">
        <div class="review-content">
          <h3>{{ review.name }}</h3>
          <div class="rating">
            <i class="fa fa-star" v-for="(star, index) in review.rating" :key="index"></i>
          </div>
          <p>{{ review.content }}</p>
        </div>
      </div>
    </div>
    <!-- 立即预约部分 -->
    <div class="cta-section">
      <h2>立即预约</h2>
      <p>为您的爱宠开启专业训练之旅，培养乖巧伙伴</p>
      <button class="btn" @click="goToReservation">在线预约</button>
      <button class="btn btn-outline">联系客服</button>
    </div>
    <!-- 引入底部信息组件 -->
    <PageFooter />
  </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
import PageFooter from '@/components/PageFooter.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function goToReservation() {
  router.push('/reservation');
}

// 热门服务项目数据
const services = [
  {
    title: "基础服从训练",
    description: "通过专业且系统的训练，让宠物学会基本指令，如坐下、趴下、等待、随行等，建立良好的主人与宠物互动关系，提升宠物的服从性和自律性。适合所有年龄段、品种的宠物，尤其是幼犬、幼猫",
    price: "价格：初级课程 1200 元（8 课时）",
    image: require('@/assets/service1.png')
  },
  {
    title: "行为纠正训练",
    description: "针对宠物常见的不良行为，如狗狗的吠叫扰民、扑人、啃咬家具，猫咪的乱排泄、抓挠等问题，进行专业行为分析与纠正。训犬师深入了解行为背后的原因，运用科学方法逐步引导宠物改变不良行为习惯",
    price: "价格：1800 元起（根据行为问题复杂程度而定）",
    image: require('@/assets/service2.png')
  },
  {
    title: "才艺训练",
    description: "挖掘宠物的潜能，教授宠物一些有趣的才艺技能，如狗狗的装死、绕桩、接飞盘，猫咪的开门、击掌等。在训练过程中，增强宠物与主人之间的默契和互动乐趣",
    price: "价格：1500 元（10 课时）",
    image: require('@/assets/service3.png')
  },
  {
    title: "高级技能训练",
    description: "为有更高需求的宠物主人提供服务，如敏捷训练、搜索追踪训练等，提升宠物的身体素质、反应能力和专注度，让宠物在专业技能上得到进一步提升",
    price: "价格：2500 元起（根据训练项目而定）",
    image: require('@/assets/service4.png')
  }
];

// 特色服务数据
const features = [
  {
    title: "专业训犬师团队",
    description: "汇聚业内经验丰富、资质认证的训犬师，精通多种训练方法，针对不同品种、年龄、性格的宠物制定专属训练策略，确保训练效果，让您的爱宠得到专业的训练",
    image: require('@/assets/feature1.png')
  },
  {
    title: "科学训练体系",
    description: "采用正向激励与行为引导相结合的科学训练体系，遵循宠物行为学原理，温和且有效地纠正不良行为，培养良好习惯，让训练过程充满乐趣，避免宠物产生抵触情绪",
    image: require('@/assets/feature2.png')
  },
  {
    title: "多样训练课程",
    description: "涵盖基础服从训练、行为纠正训练、才艺训练等丰富课程，满足不同宠物主人的需求，无论是让狗狗学会坐下、握手，还是纠正猫咪乱抓家具等问题都能解决",
    image: require('@/assets/feature3.png')
  },
  {
    title: "个性化定制服务",
    description: "充分考量每只宠物的独特性，根据宠物的性格特点、学习能力以及主人的期望，量身定制训练计划，确保训练效果最大化，帮助宠物快速适应新环境和新指令",
    image: require('@/assets/feature4.png')
  }
];

// 顾客评价数据
const reviews = [
  {
    name: "吴悠",
    rating: 5,
    content: "我家狗狗以前一出门就暴冲，怎么喊都不听。经过这里的训犬师训练后，现在能乖乖随行，真的太惊喜了！训犬师超专业，方法也很有效，强烈推荐！",
    avatar: require('@/assets/customer1.png')
  },
  {
    name: "郑宇",
    rating: 5,
    content: "猫咪总是乱抓沙发，怎么教育都没用。送来训练后，训犬师耐心指导，现在猫咪再也不破坏家具了，还学会了用猫抓板，真的解决了我的大难题！",
    avatar: require('@/assets/customer2.png')
  },
  {
    name: "苏瑶",
    rating: 5,
    content: "带狗狗来学才艺，训犬师特别有耐心，一步步引导狗狗，现在狗狗已经会好几个小才艺了，每次表演都能逗得大家很开心，超棒的训练体验！",
    avatar: require('@/assets/customer3.png')
  }
];
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* 为您的爱宠提供专业训练服务部分样式 */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/grooming-hero.jpg');
  background-size: cover;
  background-position: center;
  padding: 80px;
  color: white;
  height: 600px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  animation: heroAnimation 1.5s ease;
}
@keyframes heroAnimation {
  from {
    opacity: 0.5;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  width: 70%;
  text-align: center;
  font-size: 30px;
  line-height: 1.4;
}

/* 热门服务项目部分样式 */
.popular-services-section {
  padding: 80px;
  text-align: center;
}

.service-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: serviceAnimation 1.5s ease;
}
@keyframes serviceAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.service-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.service-content img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 30px;
}

.service-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.price {
  color: #e76f51;
  font-weight: bold;
  margin-top: 10px;
}

/* 我们的特色服务部分样式 */
.features-section {
  padding: 80px;
  text-align: center;
  background-color: #f9f9f9;
}
.feature-item {
  display: inline-block;
  width: 20%;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: featureAnimation 1.5s ease;
}
@keyframes featureAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.feature-item img {
  width: 80%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
}

/* 顾客评价部分样式 */
.reviews-section {
  padding: 80px;
  text-align: center;
}
.review-item {
  display: inline-block;
  width: 30%;
  margin: 10px;
  text-align: left;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: reviewAnimation 1.5s ease;
}
@keyframes reviewAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.review-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.customer-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}
.rating {
  color: #e9c46a;
  margin-bottom: 10px;
}

/* 立即预约部分样式 */
.cta-section {
  padding: 80px;
  text-align: center;
  background-color: #fbe8dc;
}

/* 按钮样式 */
.btn {
  background-color: #e76f51;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #d65c41;
}
.btn-outline {
  background-color: transparent;
  color: #e76f51;
  border: 2px solid #e76f51;
  padding: 15px 30px;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
  background-color: #e76f51;
  color: white;
}
</style>